<script setup lang="ts">
  import { PropType, watch, ref } from "vue";
  import { ElForm, ElFormItem, FormInstance } from "element-plus";
  import StockSelect from "./StockSelect.vue";
  const
    props = defineProps({
      modelValue: { type: Object as PropType<gt.sql.order>, default: format.def.order, },
      curd: { type: Number as PropType<gt.curd>, default: 2 }
    }),
    stockSelect = ref<InstanceType<typeof StockSelect>>(),
    rules = ref({
      name: { required: true, message: "请填写标题", trigger: "blur", min: 1 },
      type: { required: true, message: "请选择商品类型", trigger: "blur", min: 1 },
    }),
    entity = ref<FormInstance>();

  async function init() {
  }

  watch(() => props.modelValue, init, { deep: true, immediate: true });

  defineExpose({
    validate() {
      return new Promise<boolean>(async (resolve) => {
        if (entity.value) {
          entity.value.validate().then(resolve).catch(() => { resolve(false); });
        } else {
          resolve(false);
        }
      });
    },
    resetFields() { entity.value?.resetFields(); }
  });
</script>
<template>
  <ElForm class="order xw zb" ref="entity" :model="modelValue" :rules="rules" labelWidth="7em">
    <ElFormItem label="id" prop="id">
      <el-input v-model="modelValue.id" disabled placeholder="系统自动生成" />
    </ElFormItem>
    <ElFormItem label="创建时间" prop="createTime">
      <el-input :modelValue="modelValue.createTime ? modelValue._createTime : '系统自动生成'" disabled />
    </ElFormItem>
    <ElFormItem label="支付时间" prop="createTime">
      <el-input :modelValue="modelValue.payTime ? modelValue._payTime : '未支付'" disabled />
    </ElFormItem>
    <ElFormItem label="操作人" prop="_user.name">
      <el-input :modelValue="modelValue._user?.name" placeholder="系统自动生成" disabled />
    </ElFormItem>
    <ElFormItem label="标题" prop="name" class="wf">
      <el-input v-model="modelValue.name" placeholder="请输入名称" :disabled="curd == 2" />
    </ElFormItem>
    <ElFormItem label="备注" prop="des" class="wf">
      <el-input v-model="modelValue.des" placeholder="请输入备注" :disabled="curd == 2" />
    </ElFormItem>
    <ElFormItem label="收货信息" prop="_recvAddr" class="wf">
      <el-input :modelValue="modelValue._recvAddr" placeholder="请输入备注" readonly />
    </ElFormItem>
    <ElFormItem class="wf" label="出库详情" prop="banner">
      <template #label>
        <div class="whf y je">
          <div class="el-form-item__label">出库详情</div>
        </div>
      </template>
      <el-table stripe highlight-current-row :data="modelValue.content" class="wf ox" height="15em" type="expand"
        row-key="id">
        <el-table-column prop="groupName" label="库存" width="100" show-overflow-tooltip />
        <el-table-column prop="goodsName" label="商品名称" show-overflow-tooltip />
        <el-table-column prop="goodsMoney" label="单价" width="80" show-overflow-tooltip />
        <el-table-column prop="sum" label="数量" width="80" show-overflow-tooltip />
        <el-table-column prop="des" label="备注" width="160" show-overflow-tooltip />
        <el-table-column prop="_createTime" label="创建时间" width="120" show-overflow-tooltip />
        <el-table-column prop="_user.name" label="创建人" width="100" show-overflow-tooltip />
      </el-table>
    </ElFormItem>
    <StockSelect ref="stockSelect" />
  </ElForm>
</template>
<style lang="scss" scoped>
  .order {
    position: relative;
    >.el-form-item:not(.wf) {
      width: 49%;
    }
  }
</style>